<template>
    <view>
        <view style="padding: 10px; margin: 5px; background-color: #ba8d76; border-radius: 10px">
            <view style="display: flex">
                <view style="margin-left: 10px">
                    <view style="display: flex; justify-content: space-between">
                        <view>{{ serviceRecord.ciName }}</view>
                    </view>
                    <view style="font-size: 14px; color: #fff; margin-top: 3px">客户电话：{{ serviceRecord.ciPhon }}</view>
                    <view style="font-size: 14px; color: #fff; margin-top: 3px">接待员工：{{ serviceRecord.crRsna }}</view>
                    <view style="font-size: 14px; color: #fff; margin-top: 3px">创建日期: {{ UTCTimeToLocal(serviceRecord.crCrti) }}</view>
                </view>
            </view>
        </view>
        <view style="padding: 10px; margin: 5px; background-color: #fff; border-radius: 10px">
            <view class="divider" style="width: 300px">
                <view class="line"></view>
                <view class="text">服务项目清单</view>
                <view class="line"></view>
            </view>
            <view v-if="serviceRecord?.detail?.nodes?.length > 0" style="margin-top: 10px">
                <uni-card v-for="(item, index) in serviceRecord?.detail?.nodes" :is-shadow="false" :is-full="true" padding="0" margin="0">
                    <template v-slot:title>
                        <view style="display: flex; justify-content: space-between; font-size: 14px; padding: 10px 0">
                            <view> {{ index + 1 + "." + item.siName + "  x " + item.cdQuat + item.service.siUnit }}</view>
                        </view>
                    </template>
                    <view style="display: flex; height: auto; padding: 0">
                        <view style="flex: 1">
                            <view style="display: flex">
                                <view style="flex: 1; justify-content: space-between">
                                    <text>技师名称:{{ item.cdSsna }}</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </uni-card>
            </view>
            <u-empty v-if="serviceRecord?.detail?.nodes?.length === 0" text="暂无服务项目信息"> </u-empty>
        </view>
    </view>
</template>

<script>
import { getMyServiceItemList } from "../../utils/api";
import { mapGetters } from "vuex";

export default {
    data() {
        return {
            serviceRecord: {},
            ciUuid: "",
        };
    },

    async onLoad(params) {
        let resList = await getMyServiceItemList({ crUuid: params.crUuid });
        if (resList) this.serviceRecord = resList[0] || [];
        this.ciUuid = resList[0].ciUuid;
    },

    computed: {
        ...mapGetters({
            userInfo: "personInfo/userInfo",
        }),
    },

    methods: {},
};
</script>

<style lang="scss" scoped>
.divider {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 15px auto;

    .line {
        flex: 1;
        margin: 0;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        width: 100%;
        transform: scaleY(0.5);
    }

    .text {
        text-align: center;
        margin: 0 15px;
    }
}
</style>
